<template>
    <div class="t100">

        <div class="content-title">
            <p>钱包管理</p>
            <div class="recharge">
                <div class="btn right" @click="recharge">在线充值</div>
                <div class="balance right">
                    <p>钱包余额</p><br>
                    <p class="num">{{balance.balance}}</p>
                </div>
            </div>
        </div>
        <div class="content-body">
            <div>
                <div class="content-cont">
                    <el-table :data="tableData" border stripe style="width: 100%">
                        <el-table-column prop="createTimeString" label="操作时间" width="215" align="center">

                        </el-table-column>
                        <el-table-column prop="money" label="变更金额" width="215" align="center">

                        </el-table-column>
                        <el-table-column prop="tradeTypeString" label="变更类型" width="215" align="center">

                        </el-table-column>
                        <el-table-column prop="description" label="变更明细" align="center">

                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'
    export default {
        data() {
            return {
                tableData: [],
                balance: '',
            }
        },
        mounted() {
            this.accountBalance();
            this.listTrade();
        },
        methods: {
            // 获取余额
            accountBalance() {
                var vm = this;
                vm.$http({
                    method: 'GET',
                    url: utils.UrlConfig.accountBalance,
                    params: {
                        token: $cookieStore.getAll('home_').tokenKey,
                        accountId: $cookieStore.getAll("home_").accountId,
                    }
                }).then(function(res) {
                    if (res.data.code != 200) {
                        vm.$message.error(res.data.msg);
                        return;
                    }
                    vm.balance = res.data.data;
                })
            },
            // 获取订单列表
            listTrade() {
                var vm = this;
                vm.$http({
                    method: 'POST',
                    url: utils.UrlConfig.listTrade + '?token=' + $cookieStore.getAll('home_').tokenKey,
                    data: {
                        "accountId": $cookieStore.getAll("home_").accountId,
                        "pageNo": 1,
                        "pageSize": 20,
                    }
                }).then(function(res) {
                    if (res.data.code != 200) {
                        vm.$message.error(res.data.msg);
                        return;
                    }
                    vm.tableData = res.data.data.result;
                    for (var i = 0 ; i < vm.tableData.length ; i++) {
                        var date = new Date(vm.tableData[i].createTime);
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        var hours = date.getHours();
                        var minutes = date.getMinutes();
                        vm.tableData[i]['createTimeString'] = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
                        vm.tableData[i]['tradeTypeString'] = vm.tableData[i].tradeType == 'BALANCE' ? '充值入账' : '开通学校';
                        if (vm.tableData[i].tradeType == 'BALANCE') {
                            vm.tableData[i]['tradeTypeString'] = '充值入账';
                            vm.tableData[i]['money'] = '+' + vm.tableData[i]['money'];
                        } else {
                            vm.tableData[i]['tradeTypeString'] = '开通学校';
                            vm.tableData[i]['money'] = '-' + vm.tableData[i]['money'];
                        }
                    }
                })
            },
            // 在线支付
            recharge() {
                this.$router.push({path: '/walletManagement/createRecharge'})
            },
        }
    }
</script>

<style scoped>
.content-title p {
    display: inline-block;
}

.recharge {
    float: right;
}

.balance {
    font-size: 14px;
	font-weight: normal;
    color: #aab5bc;
    line-height: 23px;
    margin-top: 5px;
    margin-right: 40px;
}

.balance p {
    float: right;
}

.balance .num {
    font-size: 30px;
	color: #f37161;
	line-height: 38px;
}

.btn {
    margin-top: 20px;
}
</style>
